/* Variables */
/* Variables */
@background: #ffffff;
@title-color: #00bbe8;
@title-font: "PFDinDisplayPro";
@title-font-weight: 300;

@background-side: #eeeeee;
@sidebar-gradient-from: #eeeeee;
@sidebar-gradient-to: #cccccc;
@text-color: #333333;
@autocompleted-grayed-text-color: #999999;
@task-box-background: #f8f8f8;
@task-box-border-color: #00aad8;
@task-hover-background-color: #fafafa;
@task-description-color: #cccccc;
@task-complete-text-color: #cccccc;
@task-height-collapsed: 41px;
@task-height-expanded: 90px;
@input-border-bolor: #7ea9d3;
@header-border-bottom-color: #dddddd;

@selected-background-to: #0099cc;
@selected-background: #00bbe8;
@selected-hover-background: #00c4f0;

@sidebar-border-top-color: #ffffff;
@sidebar-border-bottom-color: #dddddd;

@category-details-color: #dddddd;

@light-separator-color: #eeeeee;


@task-side-border-hover-color: #dddddd;
@task-side-border-low-color: lightgreen;
@task-side-border-high-color: red;
@task-selected-background: #fcfcfc;
@task-dragover-background: #f8f8f8;

@popover-shadow-color: rgba(0,0,0,0.2);
@popover-shadow-border: #eeeeee;
@popover-dense-shadow-border: black;


@calendar-table-border-color: #f8f8f8;
@calendar-header-color: #888888;
@calendar-header-background-color: #eeeeee;
@calendar-hover-color: #eeeeee;
@calendar-other-month-color: #dddddd;
@calendar-other-month-background-color: #ffffff;

* {
	font-family: Arial, sans-serif;
}

@font-face {
    font-family: 'PFDinDisplayPro';
    src: url('/css/pfdindisplaypro-thin-webfont.eot');
    src: url('/css/pfdindisplaypro-thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('/css/pfdindisplaypro-thin-webfont.woff') format('woff'),
         url('/css/pfdindisplaypro-thin-webfont.ttf') format('truetype'),
         url('/css/pfdindisplaypro-thin-webfont.svg#PFDinDisplayProThin') format('svg');
    font-weight: 200;
    font-style: normal;
}

/* draggable fix */
[draggable=true] {
  -khtml-user-drag: element;
  -webkit-user-drag: element;
  -moz-user-drag: element;

  -khtml-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

/* clearfix */
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}

.border-box {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;

}
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}

/* iScroll */
body {
	-webkit-user-select:none;
	-webkit-text-size-adjust:none;
}

window {
    resize: vertical;
}

/* start */
html, body {
	overflow: hidden;
	background: @background-side;
}

#facebook-iframe {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

.title-font {
	font-family: @title-font, sans-serif;
	font-weight: @title-font-weight;
}

#app {
	background: @background;
	width: 270px;
	height: 500px;
}

.logo {
    .title-font;

	float: left;
	padding-top: 10px;
	padding-left: 18px;
	font-size: 25px;

	img {
		width: 30px;
		vertical-align: bottom;
		margin-right: 5px;
	}
}

.gray-gradient {
	background-image: linear-gradient(bottom, rgb(238,238,238) 0%, rgb(248,248,248) 100%);
	background-image: -o-linear-gradient(bottom, rgb(238,238,238) 0%, rgb(248,248,248) 100%);
	background-image: -moz-linear-gradient(bottom, rgb(238,238,238) 0%, rgb(248,248,248) 100%);
	background-image: -webkit-linear-gradient(bottom, rgb(238,238,238) 0%, rgb(248,248,248) 100%);
	background-image: -ms-linear-gradient(bottom, rgb(238,238,238) 0%, rgb(248,248,248) 100%);

	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, rgb(238,238,238)),
		color-stop(1, rgb(248,248,248))
	);
}

header {
	width: 100%;
	border-bottom: 1px solid @header-border-bottom-color;
	box-shadow: 0 3px 3px @background-side;
	height: 48px;
	text-align: left;
	.gray-gradient;

	.back {
	    display: inline-block;
		cursor: pointer;
		padding: 1px 10px 2px;
		font-size: 10px;
		font-weight: bold;
		color: #ffffff;
		text-transform: uppercase;
		white-space: nowrap;
		background-color: #bfbfbf;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		margin: 17px 20px;
	}
	.back:after {
		content: "Back";
	}
	

	.header-content {
		margin: 0 auto;
		width: 768px;
	}

	ul {
		list-style: none;
		padding: 0;
		margin: 0;

		li {
			cursor: pointer;
			float: left;
			margin-top: 16px;
			margin-bottom: 16px;
			border-right: 1px solid #ccc;
			padding-right: 16px;
			padding-left: 16px;

			.icon {
				display: block;
				float: left;
				width: 16px;
				height: 16px;
				background-size: 16px;
			}

		}
		li:last-child {
			border-right: 0;

		}

		li.selected {
			color: @background;
			font-weight: bold;

		}
		li:hover {
		}
		li.selected:hover {
		}
	}
}

.side-gradient (@side-gradient-from, @side-gradient-to) {
	background: @side-gradient-from;
	background: -moz-linear-gradient(left, @side-gradient-from 0%, @side-gradient-from 96%, @side-gradient-to 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,@side-gradient-from), color-stop(96%,@side-gradient-from), color-stop(100%,@side-gradient-to)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, @side-gradient-from 0%,@side-gradient-from 96%,@side-gradient-to 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, @side-gradient-from 0%,@side-gradient-from 96%,@side-gradient-to 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(left, @side-gradient-from 0%,@side-gradient-from 96%,@side-gradient-to 100%); /* IE10+ */
	background: linear-gradient(left, @side-gradient-from 0%,@side-gradient-from 96%,@side-gradient-to 100%); /* W3C */
}

.sidebar {
	float: left;
	width: 190px;
	height: 100%;
	font-size: 14px;
	.side-gradient (@sidebar-gradient-from, @sidebar-gradient-to);
}


.loading {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.75);

	.modal {
	    background: white;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -75px;
		margin-left: -100px;
		border: 2px solid @title-color;
		border-radius: 10px;
		width: 200px;
		height: 150px;

		div {
		    font-family: @title-font;
			font-size: 24px;
			display: block;
			margin: 30px auto;
			text-align: center;
		}
		img {
			display: block;
			margin: 30px auto;
		}
	}
}

.window {
    position: absolute;
	background: @background;
	display: block;
	width: 100%;
	height: 100%;
    top: 0;
    left: 100%;

	transition: left 0.2s ease-out;
	-webkit-transition: left 0.2s ease-out;
}
.window.visible {
    left: 0;
    display: block;
}

.form-window {

    .separator {
        text-align: center;
        height: 10px;
        width: 100%;
        margin: 10px auto;
        margin-bottom: 20px;
        border-bottom: 1px solid #eee;
        span {
            background: white;
            padding: 10px;
        }
    }
    .fb-connect img {
        cursor: pointer;
        width: 100%;
    }

	color: @text-color;
	font-size: 14px;
    text-align: center;

    div.container {
        width: 240px;
        margin: 0 auto;
    }

	input {
		.border-box;
		display: block;
		margin: 10px auto;
		width: 100%;
		padding: 10px;
		font-size: 20px;
		border: 2px solid @title-color;
		outline-color: @title-color;
        outline: none;
	}
	.already {
	    cursor: pointer;
		margin: 20px;
	}
    p {
        width: 100%;
        text-align: left;
        margin: 0 auto;
    }

    button, .button, input[type=submit] {
        display: block;
        line-height: 50px;
        cursor: pointer;
    	-webkit-appearance: none;
    	width: 100%;
    	height: 50px;
    	border-radius: 10px;
    	font-family: @title-font;
    	font-size: 20px;
    	font-weight: 200;
    	border: 1px solid #CCC;
    	color: #333;
    	border-image: initial;
    	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fafafa), color-stop(100%, #eee));
    	background-image: -webkit-linear-gradient(top, #fafafa 0%, #eee 100%);
    	background-image: -moz-linear-gradient(top, #fafafa 0%, #eee 100%);
    	background-image: -ms-linear-gradient(top, #fafafa 0%, #eee 100%);
    	background-image: -o-linear-gradient(top, #fafafa 0%,  #eee 100%);
    	background-image: linear-gradient(top, #fafafa 0%, #eee 100%);

    }

    h1 {
        font-family: PFDinDisplayPro;
        font-weight: 200;
        color: @title-color;
        text-align: left;
        margin: 20px auto;
        width: 100%;
    }

    h3 {
        margin-top: 3px;
        .title-font;
        img {
            margin-right: 5px;
        }
    }
}

.visible {
    display: block;
	left: 0px;
	opacity: 1;
}

.page {
	display: none;
	overflow-y: scroll;
	height: 100%;
}

.box-sizing(@type) {
	-webkit-box-sizing: @type;
	-moz-box-sizing: @type;
	-o-box-sizing: @type;
	-ms-box-sizing: @type;
	box-sizing: @type;
}

::-webkit-scrollbar {
        /* set the width of the scroll bar */
        width: 9px;
}

::-webkit-scrollbar-track {
  margin: 2px;
  /* set the style/colour of the scroll bar background */
        background:
        -webkit-gradient(
                linear,
                0 0,
                100% 0,
                from(rgba(0,0,0,0.2)),
                to(rgba(0,0,0,0.12))
        );
        -webkit-box-shadow: 0 1px 0 0 rgba(255,255,255,0.35);
        -webkit-border-radius: 5px;
}

::-webkit-scrollbar-thumb {
        /* this is the acutal scrooll bar, set the colours here to match your site */
        /* I have used grey's (#464646 & #383838 & #cccccc) */
        background: rgba(0,0,0,.5);
                -webkit-border-radius: 6px;
                -webkit-background-clip: padding-box;
}

.task-box {
	//background: @task-box-background;
	display: none;
	padding: 3px;
	border-bottom: 1px solid #e8e8e8;

	.task-box-details ul {
	    .border-box;
		.clearfix;
		list-style: none;
		margin: 0;
		padding: 0;

		li {
			float: left;
			margin-top: 10px;
			padding-left: 9px;
			padding-right: 9px;
			margin-bottom: 10px;
			font-size: 10px;
			color: @text-color;
			border-right: 1px solid gray;
		}

		li:last-child {
			border: 0;
		}

	}

	.task-box-input {
        margin: 5px;
		position: relative;
		padding: 5px;
        margin-left: 0;
        padding-left: 0;
		padding-right: 40px;

		input {

		    font-size: 14px;
		    .border-box;
			outline: none;
			border: 0;
			-webkit-appearance: none;
			width: 100%;
			margin-left: 10px;
		}

		img {
			position: absolute;
            top: 7px;
			right: 2px;
			width: 16px;

		}
	}
}

.tasks-wrapper {
    overflow-y: auto;
}

.tasks {
	ul {
		list-style: none;
		margin: 0;
		padding: 0;
		padding-bottom: 0px;
	}

	ul.collapsed {
	}

	.category-container {
		.category {
		    width: 100%;
			.border-box;
    		padding-top: 20px;
    		padding-left: 15px;
    		padding-right: 10px;
    		cursor: pointer;

			.name {
				.title-font;
				float: left;
				font-size: 24px;
				color: @title-color;
				cursor: pointer;
				max-width: 140px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}


            .quickadd-button {
                width: 16px;
                height: 16px;
                background-image: url(/images/plus_icon.png);
                background-size: 100%;
                opacity: 0.5;
            }

            .quickadd-button:hover {
                opacity: 0.75;

            }

            .quickadd-button:hover {
                opacity: 1;

            }

    		.details {
    		    .title-font;
    			float: right;
    			font-size: 20px;
    			margin-top: 3px;
    			color: @category-details-color;
    		}

            .quickadd-button {
                float: right;

                margin-top: 5px;
                margin-left: 5px;

                img {
                    height: 18px;
                }
            }
    	}
	}
	.category-container.drag-drop-hover {
		.category {
			.name {
				color: #006699;
			}
		}
	}


}

.notes {

	.add-note {
	    margin-left: 12px;
	    height: 40px;
	    line-height: 40px;
	    border-bottom: 1px solid @light-separator-color;

		img {
		    margin-left: 2px;
			width: 15px;
			vertical-align: text-bottom;
            opacity: 0.5;

		}
		input {
			.border-box;
			width: 160px;
			margin-left: 5px;
			margin-right: -30px;
			outline: none;
   			border: 0;
   			-webkit-appearance: none;
			border: 0;
			background: none;
			font-size: 13px;
			padding: 5px;
		}
	}
}

.simple-transition(@time) {
	-moz-transition: all @time ease;
	-webkit-transition: all @time ease;
	-o-transition: all @time ease;
	-ms-transition: all @time ease;
	transition: all @time ease;
}

.transition {
	-moz-transition: background 0.1s ease-in-out, height 0.1s ease-in-out, border-left 0.1s ease-in-out, color 0.1s ease-in-out, text-decoration 0.1s ease-in-out, top 0.1s ease-in-out, -moz-transform 0.3s ease-out, opacity 0.3s ease-out, left 0.3s ease-out;
	-webkit-transition: background 0.1s ease-in-out, height 0.1s ease-in-out, border-left 0.1s ease-in-out, color 0.1s ease-in-out, text-decoration 0.1s ease-in-out, top 0.1s ease-in-out, -webkit-transform 0.3s ease-out, opacity 0.3s ease-out, left 0.3s ease-out;
	-o-transition: background 0.1s ease-in-out, height 0.1s ease-in-out, border-left 0.1s ease-in-out, color 0.1s ease-in-out, text-decoration 0.1s ease-in-out, top 0.1s ease-in-out, -o-transform 0.3s ease-out, opacity 0.3s ease-out, left 0.3s ease-out;
	-ms-transition: background 0.1s ease-in-out, height 0.1s ease-in-out, border-left 0.1s ease-in-out, color 0.1s ease-in-out, text-decoration 0.1s ease-in-out, top 0.1s ease-in-out, -ms-transform 0.3s ease-out, opacity 0.3s ease-out, left 0.3s ease-out;
	transition: background 0.1s ease-in-out, height 0.1s ease-in-out, border-left 0.1s ease-in-out, color 0.1s ease-in-out, text-decoration 0.1s ease-in-out, top 0.1s ease-in-out, transform 0.3s ease-out, opacity 0.3s ease-out, left 0.3s ease-out;
}

.drag-drop-placeholder {
	.border-box;
    -webkit-transition: height 0.1s linear;
    height: 0;
}

.task.deleted {
    height: 0px;
    opacity: 0;
    border: none;
}

.task.complete.shifted {
	opacity: 0;
}

.task.shifted {
    opacity: 0;
//    -webkit-transform: translate(-100%, 0);
    left: -10%;
}

.task {
    opacity: 1;
//    -webkit-transform: translate(0, 0);
    left: 0;

    overflow: hidden;
	position: relative;
	padding-left: 40px;
	cursor: pointer;
	margin-top: 0;
	height: @task-height-collapsed;
	border-left: 4px solid @background;
    border-bottom: 1px solid @header-border-bottom-color;

	.transition;

	.container {
		padding-top: 3px;
		height: 37px;
		padding-right: 39px;
	}

	.check-button {
		position: absolute;
		top: 5px;
		left: 5px;
		width: 32px;
		height: 32px;
		background: url(/images/check_item_small.png) center no-repeat;
	}

	.check-button:hover {
		background: url(/images/check_item_small_hover.png) center no-repeat;

	}

	.delete-button {
		margin-top: 8px;
		margin-right: -30px;
		width: 20px;
		height: 20px;
		background: url(/images/delete_item_small.png) center;
		float: right;
		visibility: hidden;
	}

	.delete-button:hover {
        background: url(/images/delete_item_small_hover.png) center;
	}

	.drag-button {
		margin-top: 8px;
		margin-right: -30px;
		width: 20px;
		height: 20px;
		background: url(/images/dragdrop.png) center;
        background-repeat: no-repeat;
		float: right;
		visibility: hidden;
	}

	.drag-button:hover {
        background: url(/images/dragdrop_hover.png) center;
        background-repeat: no-repeat;
        visibility: visible;
	}

	.summary {
		.border-box;
		font-size: 13px;
		border: none;
		padding: 1px;
		margin: none;
		background: none;
		display: inline-block;
		margin-top: 9px;
	}

	input.summary {
		-webkit-user-select: none;
		outline: none;
	    position: relative;
	 	left: -1px;
		display: none;
		cursor: pointer;
	}

	div.summary {
		display: block;
		overflow: hidden;
		text-overflow: hidden;
		white-space: nowrap;
	}

    .no-description {
    	//position: relative;
    	//top: 4px;
    }

	.description {
		font-size: 12px;
		color: @task-description-color;
		/*visibility: hidden;*/
	}

	.task-properties {
	    position: relative;
	 	left: -40px;
		display: none;
		list-style: none;
		width: 270px;


		li {
			display: inline-block;
			float: left;
			font-size: 11px;
			color: gray;
			border-right: 1px solid @light-separator-color;
			width: 63px;
            margin: 10px auto;
			text-align: center;

			.icon {
				display: block;
				width: 20px;
				height: 20px;
				margin: 0 auto;
			}
		}

		li.selected {
			/*
			background: @selected-background;
			color: white;
			*/
		}
		li:last-child {
			border: 0;
		}
	}
	.notes {
		display: none;

	    .note {
            border-left: 0;
            .description {
                display: none;
            }

            .drag-button {
                display: none;
            }
	    }

	    .note.complete, .note:hover {
	        background: none;
	    }

	}

}

.task:hover {
	background: @task-hover-background-color;
	border-left: 4px solid @task-side-border-hover-color;

	.check-button {
		visibility: visible;
	}

	.drag-button {
		visibility: visible;
	}

}

.task.selected {
	background: @task-selected-background;
	height: @task-height-expanded;

	.summary {
    	-webkit-user-select: text;
    	cursor: text;
	}

	.description {
		visibility: visible;
	}

	.task-properties {
		display: block;

        li {
            height: 32px;

            .icon-indicator {
                display: block;
                background: black;
                color: white;
                border-radius: 10px;
                width: 16px;
                height: 15px;
                margin-top: -39px;
				margin-left: 15px;
                font-size: 9px;
                line-height: 16px;
                text-align: center;
                pointer-events: none;
            }

        }

	}

	input.summary {
		display: block;
	}
	div.summary {
		display: none;
	}

}

.task.dragged {
	/* background: @task-dragover-background; */
	cursor: move;
}

.task.high {
	border-left: 4px solid @task-side-border-high-color;
}

.task.medium {
	border-left: 4px solid yellow;
}

.task.low {
	border-left: 4px solid @task-side-border-low-color;
}

.task.complete {
	color: @task-complete-text-color;
    opacity: 0.7;

	height: @task-height-collapsed;

    > .container {
        .summary {
            text-decoration: line-through;
            color: gray;
        }

		div.summary {
			display: block;
		}

		input.summary {
			display: none;
		}

        .check-button {
            opacity: 0.3;
        }

        .drag-button {
			visibility: hidden;
        }

        .delete-button {
            opacity: 0.5;
            visibility: visible;
        }

    }

}

.task.complete.hover .description {
	display: none !important;
}

.drag-drop-invisible {
    display: none;
}

.drag-drop-ghost {
    display: block;
    position: absolute;
    top: 100px;
    left: 100px;
    opacity: 0.8;
    background-color: #f9f9f9;
    pointer-events: none;
    transition: none;
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    -ms-transition: none;
}

.popover-anchor {
	position: absolute;
	width: 16px;
	height: 16px;

	background: @background;
	behavior: url(-ms-transform.htc);
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	z-index: 2;
}

.popover-anchor-top {
    border-right: 1px solid black;
	border-bottom:  1px solid black;
}

.popover-anchor-bottom
{
    border-left: 1px solid black;
	border-top:  1px solid black;
}

.folders-chooser {
    .popover-background {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .popover-window {
        position: absolute;
        border: 1px solid @popover-dense-shadow-border;
        border-radius: 8px;
        background: @background;
        box-shadow: 0px 5px 5px @popover-shadow-color;
        width: 160px;

        .choose-folder {
            padding: 10px;
            .title-font;
            font-size: 18px;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
            color: @title-color;
            z-index: 3;
        }

        input {
			.border-box;
            width: 160px;
            background: none;
            border: 0;
            margin: 0;
            padding: 10px;
            .title-font;
            border-bottom-left-radius: 8px;
            border-bottom-right-radius: 8px;
            display: block;
            outline: none;

        }

        ul {
            list-style: none;
            font-size: 20px;
            z-index: 3;
            margin: 0;
            padding: 0;
            border-top: 1px solid @light-separator-color;
            border-bottom: 1px solid @light-separator-color;
            max-height:135px;
            overflow-y: auto;

            li {
                display: block;
                cursor: pointer;
                z-index: 2;
                vertical-align: middle;
                border-bottom: 1px solid @light-separator-color;

                .text {
                    .title-font;
					padding-top: 10px;
					padding-bottom: 10px;
					padding-left: 10px;
                    font-size: 17px;
					width: 90px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
                }

				.edit-box {
					display: none;
					.title-font;
					padding-top: 10px;
					padding-bottom: 10px;
					padding-left: 9px;
				    font-size: 17px;
					width: 90px;
				}

				.edit-button {
					visibility: hidden;
					margin-top: 10px;
					margin-right: 5px;
					width: 20px;
					height: 20px;
					background: url(/images/edit_item_small.png) center;
					float: right;
					cursor: pointer;
				}

				.edit-button:hover {
					background: url(/images/edit_item_small_hover.png) center;
				}

                .delete-button {
					visibility: hidden;
                    margin-top: 10px;
                    margin-right: 5px;
                    width: 20px;
                    height: 20px;
                    background: url(/images/delete_item_small.png) center;
                    float: right;
                    cursor: pointer;
                }

                .delete-button:hover {
                    background: url(/images/delete_item_small_hover.png) center;
                }
            }

            li:last-child {
                border-bottom: 0;
            }

            li:hover {
				.edit-button {
					visibility: visible;
				}

				.delete-button {
					visibility: visible;
				}
            }

            li.selected {
                background: @selected-background;
                color: @background;

				.text {
					color: white;
				}

				.edit-box {
					color: white;
				}

				.edit-button {
					background: url(/images/edit_item_small_white.png) center;
				}

				.delete-button {
        			background: url(/images/delete_item_small_white.png) center;
    			}
            }
        }
    }
}

.context-menu-container {
    .menu-background {
        position: fixed;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
    }

    .menu-content {
        position: absolute;
        box-shadow: 3px 3px 10px 0px @popover-shadow-color;
        background-color: @background;

    }

    ul {
		list-style: none;
		padding: 0;
		margin: 0;

		li a {
			font-family: inherit;
			font-weight: inherit;
		    font-size: inherit;
			color: inherit;
			text-decoration: none;
		}

		li {
		    font-size: 13px;
			cursor: pointer;
			float: top;
			border-bottom: 1px solid #dddddd;
			padding-right: 10px;
			padding-left: 10px;
            padding-top: 5px;
            padding-bottom: 5px;
            line-height: 30px;
            width: 150px;

			.icon {
				display: block;
				float: left;
	            padding-right: 10px;
				width: 20px;
				height: 20px;
	            position: relative;
	            top: 5px;
			}

			.option {
				float: right;
				font-weight: bold;
				color: #aaaaaa;
			}

		}

		li:last-child {
			border-right: 0;
            border-bottom: 0;
		}

		li.selected {
			color: @background;
			font-weight: bold;
		}
		li:hover {
		    color: @title-color;
		}
		li.selected:hover {
		}
	}
}

.calendar-window {
	.set {
	    text-align: center;
	    display: block;
	 	width: 60px;
	 	margin: 10px auto;
		background: @title-color;
		color: white;
		border-radius: 10px;
		padding: 5px 50px;
	}

    .set:hover {
        cursor: pointer;
    }

	h1 {
		float: left;
		margin-left: 10px;
		line-height: 30px;
        .title-font;
        color: @title-color;
        font-size: 24px;

	}

	h2 {
	    .title-font;
		padding: 0;
		margin: 0;
		color: @title-color;
		padding-top: 18px;
		padding-left: 18px;
	}

	h3 {
	    float: right;
		padding: 0;
		margin: 0;
		margin-top: 10px;
		margin-right: 10px;
		padding-top: 5px;
		padding-left: 18px;
		font-size: 18px;
		line-height: 35px;
		vertical-align: text-bottom;
		font-weight: lighter;
	}

	table {
	    clear: both;
		thead {
			tr th {
				width : 60px;
				color : @calendar-header-color;
				border : 1px solid @calendar-table-border-color;
				background : @calendar-header-background-color;
				font-size : 14px;
				font-weight : bold;
				padding : 5px;
			}

			tr td {
				font-size : 12px;
				text-align : center;
				color : @text-color;
				border : 1px solid @calendar-table-border-color;
				padding : 5px;
			}
		}

		tbody {
		    tr {
				td {
					font-size : 14px;
					text-align : center;
					color : @text-color;
					border : 1px solid @calendar-table-border-color;
					padding : 5px;
				}

				td.current-month {
					cursor: pointer;
				}

				td.current-month:hover {
					background: @calendar-hover-color;
				}

				td.current-month.selected {
					background: @selected-background;
					color: @background;
					text-decoration: underline;
				}

				td.other-month {
					color: @calendar-other-month-color;
					background: @calendar-other-month-background-color;
				}
			}
		}

	}

    .calendar-control {
        background-position: center;
        background-repeat: no-repeat;
        cursor: pointer;

    }

    .calendar-time {
        font-size: 14px;
        text-align: center;
        padding: 20px 0;

        input[type=checkbox] {
            outline: none;
            margin-right: 6px;
        }

        select {
            outline: none;
            margin-left: 3px;
            margin-right: 3px;
        }
        select:first-child {
            margin-left: 20px;
        }
    }

    .calendar-option {
        border-top: 1px solid @light-separator-color;
        height: 40px;
        padding: 5px;
        vertical-align: middle;
        text-align: center;

        img {
            vertical-align: middle;
            width: 24px;
            height: 24px;
            padding: 8px;

        }

        span {
            text-align: left;
            width: 60px;
            display: inline-block;
            font-size: 14px;
			padding-right: 10px;
        }

        select {
            -webkit-appearance: none;
            width: 150px;
            font-size: 13px;
            line-height: 13px;
            font-family: Arial, sans-serif;
            border: 1px solid gray;
            border-radius: 5px;
            padding: 5px;
            padding-left: 15px;
            background: url(/images/dropdown-arrow.png),url(/images/dropdown.png);
            background-position: 135px, center;
            background-repeat: no-repeat;

        }
    }
    table {
        width: 100%;
    }
}

.autocomplete {
    .autocomplete-loading-element {
        position: absolute;
        display: none;
        top: 5px;
        background-repeat: no-repeat;
        background-image: url(/images/loading.gif);
        background-position: right;
        background-size: 20px 20px;
        padding: 10px;
        font-size: 14px;
    }

    .autocomplete-loading-element.ltr {
        .autocomplete-loading-element;
        right: 35px;
    }

    .autocomplete-loading-element.rtl {
        .autocomplete-loading-element;
        left: 10px;
    }

    .autocomplete-grayed-container {
        display: none;
        font-size: 14px;
        //background-color: @task-box-background;

        // This replaces bold enries from autocomplete to grayed ones,
        // we assume that ac returns new text wrapped by <b/> tag
        // this should be replaced so that ac returns it as a css class
        b {
            font-weight: normal;
            color: @autocompleted-grayed-text-color;
			display: none;
        }

         .autocomplete-artificial-caret {
             display: none;

             padding: 0px;
             margin: 0px;

             line-height: normal;

             left: 0px;
             top: 0px;
             width: 1px;
             height: 1em;

             margin-top: -1px;
             margin-right: -1px;

             background-color: #000000;
         }
    }

    ul.autocomplete-list {
        background: @background;
        position: absolute;
        display: none;
        margin: 0;
        padding: 0;
        z-index: 100;
        list-style: none;
        border: 1px solid @popover-shadow-border;
        overflow-y: visible;
        box-shadow: 0px 0px 10px @popover-shadow-color;

        li {
            border-bottom: 1px solid @light-separator-color;
            padding: 10px;
            font-size: 14px;
        }

        li:last-child {
            border-bottom: 0;
        }

        li:hover {
            cursor: pointer;
        }

        li.selected {
            background: @selected-background;
            color: @background;
        }
    }
}

.new-folder-input {
	font-size: 24px;
	font-family: PFDinDisplayPro;
	border: 0;
	outline: 0;
	margin-top: 19px;
	margin-left: 14px;
}

.hidden {
	position: absolute;
}
.icon {
	background-repeat: no-repeat;
}

.dialog {
	.popover-background {
		background: rgba(255, 255, 255, 0.75);
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.popover {
		.border-box;
		background: white;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -72px;
		margin-left: -110px;
		height: 144px;
		width: 220px;
		border: 2px solid #bbbbbb;
		border-radius: 10px;
		box-shadow: 0 5px 20px @popover-shadow-color;
		font-size: 13px;
	}

	h1 {
		font-family: @title-font;
		font-weight: @title-font-weight;
		color: @title-color;
		margin: 10px;
	}

	p {
		margin: 10px;
		color: gray;
	}

	.dialog-button {
		.border-box;
		width: 107px;
		float: left;
		height: 45px;
		line-height: 45px;
		border-top: 1px solid #EEE;
		cursor: pointer;
		padding-left: 40px;
		background-repeat: no-repeat;
		background-position: 10px 14px;
		background-size: 24px;
	}

	.yes {
		font-size: 20px;
		background-image: url(/images/btn_ok.png);
	}

	.yes:hover {
		background-image: url(/images/btn_ok_pressed.png);
	}

	.no {
		font-size: 15px;
		background-image: url(/images/btn_cancel.png);
		border-right: 1px solid #eeeeee;
	}

	.no:hover {
		background-image: url(/images/btn_cancel_pressed.png);
	}

}



/* Images */
.icon-date              .icon { background-image: url(/images/time_gray.png); }
.icon-date.selected     .icon { background-image: url(/images/time_blue.png); }
.icon-folders           .icon { background-image: url(/images/folder_gray.png); }
.icon-folders.selected  .icon { background-image: url(/images/folder_blue.png); }
.icon-priority          .icon { background-image: url(/images/priority_gray.png); }
.icon-priority.selected .icon { background-image: url(/images/priority_blue.png); }
.icon-settings          .icon { background-image: url(/images/settings_gray.png); }
.icon-settings:active   .icon { background-image: url(/images/settings_blue.png); }
.icon-pop-in            .icon { background-image: url(/images/pop_in_gray.png); }
.icon-pop-in:active     .icon { background-image: url(/images/pop_in_blue.png); }
.icon-pop-out           .icon { background-image: url(/images/pop_out_gray.png); }
.icon-pop-out:active    .icon { background-image: url(/images/pop_out_blue.png); }

.icon-set-priority      .icon { background-image: url(/images/set_priority.png); }
.icon-set-folder        .icon { background-image: url(/images/set_folder.png); }
.icon-set-alert         .icon { background-image: url(/images/set_alert.png); }
.icon-set-alert.selected .icon { background-image: url(/images/set_alert_on.png); }
.icon-set-note          .icon { background-image: url(/images/set_note.png); }

/*
.icon-set-priority      .icon { background-image: url(/images/priority_blue.png); }
.icon-set-folder        .icon { background-image: url(/images/folder_blue.png); }
.icon-set-alert         .icon { background-image: url(/images/alert_blue.png); }
.icon-set-alert.selected .icon { background-image: url(/images/alert_red.png); }
.icon-set-note          .icon { background-image: url(/images/note_blue.png); }
*/

.icon-settings-clear            .icon {background-image: url(/images/delete_gray.png); }
.icon-settings-clear:hover      .icon {background-image: url(/images/delete_blue.png); }
.icon-settings-sign-out         .icon {background-image: url(/images/signout_gray.png); }
.icon-settings-sign-out:hover   .icon {background-image: url(/images/signout_blue.png); }
.icon-settings-feedback         .icon {background-image: url(/images/menu_feedback_gray.png); }
.icon-settings-feedback:hover   .icon {background-image: url(/images/menu_feedback_blue.png); }
.icon-settings-calendar         .icon {background-image: url(/images/menu_date_gray.png); }
.icon-settings-calendar:hover   .icon {background-image: url(/images/menu_date_blue.png); }

.calendar-control {
	background-repeat: no-repeat;
}
.calendar-control.prevprev {background-image: url();}
.calendar-control.prev {background-image: url();}
.calendar-control.next {background-image: url();}
.calendar-control.nextnext {background-image: url();}

